<template>
    <!-- pages/my/index.wxml -->
    <view class="page">
        <view class="header">
            <image class="mybg" :src="imgUrl + 'my-bg.png'"></image>
            <view class="mymessage">
                <view class="personage">
                    <view class="headsshadowbox" @tap="onMyProfile">
                        <view class="headsshadow"></view>
                        <image class="heads" :src="userObj ? userObj.imgPath : ''"></image>
                    </view>
                    <view class="mymsg" v-if="userObj && userObj.storeName">
                        <view>
                            <text class="text-hidden">{{ userObj?userObj.storeName: '' }}</text>
                            <!-- <text wx:if="{{!makerObj.ismaker}}">创客</text> -->
                        </view>
                        <view>
                            <text>邀请码：</text>
                            <text>{{ codeObj.invitecode }}</text>
                            <image @tap.stop.prevent="copywxtap" :src="imgUrl + 'copy.png'"></image>
                        </view>
                    </view>
                </view>
                <view v-if="userObj && !userObj.storeName" class="login" @tap="onLogin">请登录</view>
                <view class="setbox" v-if="userObj && userObj.storeName">
                    <view @tap="goSigin">
                        <image :src="imgUrl + 'sigin.png'"></image>
                        <text>签到</text>
                    </view>
                </view>
            </view>
            <view class="mytabs">
                <view class="mytabstool mt-40" data-index="index" @tap="toPath(item.function)"
                    v-for="(item, index) in mytabsList" :key="index">
                    <image class="orderimg" :src="imgUrl + item.img"></image>

                    <text class="text-f mt-20">{{ item.name }}</text>
                </view>
            </view>
            <view :class="markershow ? 'marker1' : 'marker'">
                <view class="flexbox-sb markerbox1" @tap="showMarker">
                    <view class="centers">
                        <view class="markertext2 mr-20">{{ makerDetail.description ? makerDetail.description : '创客卡' }}
                        </view>
                        <View class="markertext2 mr-20">|</View>
                        <view class="markertext1" v-if="makerObj && !makerObj.ismaker">分享赚赏金，每日涨不停</view>
                        <block v-if="makerObj && makerObj.ismaker">
                            <view class="markertext1" v-if="makerDetail.description == '传奇创客'">当前已是最高等级</view>
                            <view class="markertext1" v-else-if="makerDetail.description == '领航创客'">分享赚赏金，每日涨不停</view>
                            <view class="markertext1" v-else>再销售{{ makerDetail.myupgrade }}张创客卡升级</view>
                        </block>
                    </view>

                    <view v-if="makerObj && !makerObj.ismaker" class="markercard" @tap.stop.prevent="getMarkerCard">点击领取
                    </view>
                    <view v-if="makerObj && makerObj.ismaker" class="markercard" @tap.stop.prevent="getMarkerDetails">
                        查看详情
                    </view>
                </view>
                <view class="markerbox2 mt-20" v-if="markershow">
                    <view class="markertitle">创客卡尊享至尊权益</view>
                    <view class="markertoolbox">
                        <view class="markertool mt-40" data-index="index" @tap="onMaker"
                            v-for="(item, index) in makerList" :key="index">
                            <image class="markerimg" :src="imgUrl + item.img"></image>

                            <text class="markertext">{{ item.name }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view :class="markershow ? 'showbottom1' : 'showbottom2'">
            <block v-if="makerDetail.description == '传奇创客'">
                <view class="earningsbox earningsbox2">
                    <view class="payroll" @tap="toDetail">
                        <view class="earningstext1">传奇创客奖金池</view>
                        <view class="earningstext2">{{ bonusPool }}</view>
                        <view class="centers center">
                            <view class="earningstext3">奖金 (元)</view>
                        </view>
                    </view>
                    <view class="h-x"></view>
                    <view class="payroll" @tap="toDetail">
                        <view class="earningstext1 centers item-right">
                            <text class="earningstext3">查看明细</text>
                            <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                        </view>
                        <view class="earningstext2">{{ peopleNum }}</view>
                        <view class="centers center"><text class="earningstext3">达标 (人)</text></view>
                    </view>
                </view>
                <view class="mt-20"></view>
            </block>

            <view class="earningsbox">
                <view class="earningsimg">
                    <image class="icon-32" @tap="seeMoney" :src="seeShow ? imgUrl + 'nosee.png' : imgUrl + 'see.png'">
                    </image>
                </view>
                <view class="payroll" @tap="toIncome">
                    <view class="earningstext1">待发放收益</view>
                    <view class="earningstext2" v-if="accountObj && accountObj.yesterdayRecommentIncome">{{
                seeShow? '¥' +
                    accountObj.yesterdayRecommentIncome : '***' }}</view>
                    <view class="earningstext2" v-if="accountObj && !accountObj.yesterdayRecommentIncome">{{
                        seeShow? '¥' + 0 : '***'
                    }}</view>
                    <view class="centers center">
                        <view class="earningstext3" v-if="accountObj && accountObj.recommentIncome">已发放收益{{
                    seeShow? '¥' +
                        momentumReturns : '***' }}</view>
                        <view class="earningstext3" v-if="accountObj && !accountObj.recommentIncome">已发放收益{{
                            seeShow? '¥' + 0 : '***'
                        }}</view>
                        <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                    </view>
                </view>
                <view class="h-x"></view>
                <view class="payroll" @tap="toWallet">
                    <view class="earningstext1">钱包余额</view>
                    <view class="earningstext2" v-if="accountObj && accountObj.account">{{
                        seeShow? '¥' + accountObj.account : '***'
                    }}</view>
                    <view class="earningstext2" v-if="accountObj && !accountObj.account">{{ seeShow? '¥' + 0 : '***' }}
                    </view>
                    <view class="centers center">
                        <text class="earningstext3">查看钱包明细</text>
                        <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                    </view>
                </view>
            </view>

            <view class="orderbox mt-20">
                <!-- <view class="order">
        <view>商城订单</view>
        <view class="order1" bindtap="onOrdertype" data-type="-1">全部订单<image class="icon-32" src="{{imgUrl + 'right.png'}}"></image></view>
      </view>
      <view class="ordertoolbox">
        <view class="ordertool mt-40" wx:for="{{shoporderList}}" data-type="{{item.type}}" wx:key="index"
          bindtap="onOrdertype">
          <text class="index-title" style="color:#333">{{item.sum}}</text>
          <text>{{item.name}}</text>
        </view>
      </view> -->
                <van-tabs :active="active" @change="onChange" title-active-color="#333333"
                    title-inactive-color="#999999" nav-class="nav-class" custom-class="custom-class">
                    <van-tab title="商城订单">
                        <view class="ordertoolbox">
                            <view class="oredertool mt-40" :data-type="item.type" @tap="onOrdertype"
                                v-for="(item, index) in shoporderList" :key="index">
                                <view>{{ item.sum }}</view>

                                <text class="oredertext">{{ item.name }}</text>
                            </view>
                        </view>
                    </van-tab>
                    <van-tab title="自提订单">
                        <view class="orederbox">
                            <view class="oredertool mt-40 oredertool2" :data-type="item.type" @tap="onOrdertype1"
                                v-for="(item, index) in storemsgList" :key="index">
                                <view>{{ item.sum }}</view>

                                <text class="oredertext">{{ item.name }}</text>
                            </view>
                        </view>
                    </van-tab>
                </van-tabs>
            </view>
            <view class="voice_box" @tap="goVoicebox">
                <view class="voice">
                    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/voice_icon.png" mode="" />
                    <text>语音播报音箱</text>
                </view>
                <view class="voice_num">
                    <text>已绑{{ boxList.length }}台设备</text>
                    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/r_icon.png" mode="" />
                </view>
            </view>
            <view class="orderbox2 mt-20">
                <view class="order">
                    <view>我的服务</view>
                </view>
                <view class="ordertoolbox">
                    <view class="ordertool mt-40" data-index="index" @tap="myserverToapth(item.function)"
                        v-if="item.appletCheck != 0 && ((authtype == 1 && item.name == '收款码') || item.name != '收款码')"
                        v-for="(item, index) in myserverList" :key="index">
                        <image class="orderimg" :src="imgUrl + item.img"></image>

                        <text>{{ item.name }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/my/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

const { isObj } = require('../../utils/util.js'); // 引入require;

const isRelease = getApp().globalData.isRelease; //提审屏蔽部分模块, 防止发布不通过

export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            authtype: '',

            mytabsList: [
                {
                    name: '收藏夹',
                    img: 'mytab1.png',
                    function: '/pages/myfavorite/index'
                },
                {
                    name: '优惠券',
                    img: 'mytab2.png',
                    function: '/pages/mypreferentialcard/index'
                },
                {
                    name: '钱包',
                    img: 'mytab3.png',
                    function: '/ec-canvas/wallet/index'
                },
                {
                    name: '意豆',
                    img: 'mytab4.png',
                    function: '/pages/yidou/index'
                }
            ],

            makerList: [
                {
                    name: '订单收益',
                    img: 'maker1.png'
                },
                {
                    name: '现金大礼包',
                    img: 'maker2.png'
                },
                {
                    name: '推荐奖励',
                    img: 'maker3.png'
                },
                {
                    name: '商品带货',
                    img: 'maker4.png'
                },
                {
                    name: '更多',
                    img: 'maker5.png'
                }
            ],

            myserverList: [
                {
                    name: '收款码',
                    img: 'collectioncode.png',
                    function: '/pages/collectioncode/index'
                },
                {
                    name: '收货地址',
                    img: 'address.png',
                    function: '/shopingmall/addressmanager/addressmanager'
                },
                {
                    name: '账户安全',
                    img: 'safety.png',
                    function: '/pages/myset/index'
                },
                {
                    name: '推广分享',
                    img: 'promotion.png',
                    function: '/pages/generalize/index'
                },
                {
                    name: '合作邀约',
                    img: 'promotion-hb.png',
                    function: isRelease ? '/pages/redenvelope/index' : '',
                    appletCheck: 0
                },
                {
                    name: '卡券兑换',
                    img: 'card.png',
                    function: '/pages/cardexchange/index'
                },
                {
                    name: '消费保障',
                    img: 'tool2.png',
                    function: '/component/safeguard/index'
                },
                {
                    name: '问题/反馈',
                    img: 'tool3.png',
                    function: '/component/feedback/index'
                },
                {
                    name: '关于意约',
                    img: 'tool4.png',
                    function: '/pages/aboutus/index'
                }
            ],

            shoporderList: [
                {
                    name: '待付款',
                    type: 0,
                    sum: '0'
                },
                {
                    name: '待发货',
                    type: 1,
                    sum: '0'
                },
                {
                    name: '待收货',
                    type: 2,
                    sum: '0'
                },
                {
                    name: '退换/售后',
                    type: 3,
                    sum: '0'
                },
                {
                    name: '全部',
                    type: -1,
                    sum: '0'
                }
            ],

            storemsgList: [
                {
                    name: '待自提',
                    type: 2,
                    sum: '0'
                },
                {
                    name: '已自提',
                    type: 1,
                    sum: '0'
                }
            ],

            markershow: false,
            codeObj: null,
            userObj: null,
            makerObj: null,
            OrderCountList: null,
            seeShow: true,
            active: 0,
            accountObj: null,
            momentumReturns: 0,
            bonusPool: 0,

            //奖金池
            peopleNum: 0,

            //达标人数
            boxList: [],

            imagePathShow: false,
            appletCheck: '',

            makerDetail: {
                description: false,
                myupgrade: ''
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) { },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () { },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        _request
            .get('/box/getIncoming', {
                storeId: uni.getStorageSync('storeId')
            })
            .then((res) => {
                if (res.data.code === 200) {
                    const data = res.data.data;
                    this.setData({
                        imagePathShow: data.openAccountStatus == 4 && (data.aliVerifyState == 1 || data.wechatVerifyState == 1)
                    });
                    console.log(this.imagePathShow);
                }
            });

        this.getBoxList();

        _request
            .get('/storeAuthApply/getStoreAuthStatusByStoreId', {
                storeId: uni.getStorageSync('storeId') || 0
            })
            .then((res) => {
                if (res.data.code == 200) {
                    this.setData({
                        authtype: res.data.data.status
                    });
                }
            }); // 获取我的推荐码

        _request
            .get('/recomUser/findReCode', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    codeObj: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 根据类型获取三端小程序审核状态  0待审核 1已审核

        _request
            .get(
                '/yy-data-conves/getAppletCheckByType',
                {
                    type: 1
                },
                app.globalData.mallType
            )
            .then((res) => {
                // console.log(res)
                if (res.data.code === 200) {
                    uni.setStorageSync('appletCheck', res.data.data.dval);
                    this.setData({
                        appletCheck: res.data.data.dval,
                        myserverList: this.myserverList.map((item) => {
                            if (item.name == '合作邀约') {
                                item.appletCheck = res.data.data.dval;
                            }

                            return item;
                        })
                    });
                }
            });

        this.orderList(); //自提订单统计

        this.orderLists(); // 获取用户个人信息

        _request
            .get('/storeCenterInfo/getStoreCenterInfo', {
                id: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    userObj: res.data.data
                });

                if (res.data.data && res.data.data.storeName) {
                    uni.setStorageSync('nickName', res.data.data.storeName);
                    uni.setStorageSync('userInfo', res.data.data);
                }

                console.log('1', res);
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 是否创客

        _request
            .get('/maker/checkIsMaker', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    makerObj: res.data.data
                });
                uni.setStorageSync('maker', res.data.data); // 是创客的时候才去获取详情

                if (res.data.data && res.data.data.ismaker) {
                    // 获取用户创客信息
                    _request
                        .get('/maker/userMakerInfo', {
                            userId: uni.getStorageSync('userid')
                        })
                        .then((res) => {
                            let data = res.data.data;
                            let myupgrade = 0;

                            if (res.data.code == 200 && data) {
                                // 计算当前升级所需人数
                                data.makerUpRule.map((item, index) => {
                                    if (data.description == item.description && item.description != '传奇创客') {
                                        myupgrade = data.makerUpRule[index + 1].upgradeNum - data.downBuySum;
                                    } else if (data.description == '传奇创客') {
                                        myupgrade = 3000;
                                    }

                                    return item;
                                });
                                uni.setStorageSync('salesVolume', res.data.data.salesVolume);
                                this.setData({
                                    makerDetail: { ...res.data.data, myupgrade }
                                });

                                if (data.description == '传奇创客') {
                                    this.getBonusPool();
                                }
                            }
                        })
                        .catch((error) => {
                            console.log(error, 'error');
                        });
                }
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 获取账户余额信息

        _request
            .get('/wallet/getPersonAccount', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    accountObj: res.data.data
                });

                if (res.data.data) {
                    if (res.data.data.recommentIncome > 9999) {
                        let money = res.data.data.recommentIncome;
                        this.setData({
                            momentumReturns: (money - (money % 1000)) / 10000 + 'w'
                        });
                    } else {
                        this.setData({
                            momentumReturns: res.data.data.recommentIncome
                        });
                    }
                }
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () { },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () { },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () { },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () { },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () { },
    methods: {
        goVoicebox() {
            if (!this.imagePathShow) {
                uni.showToast({
                    title: '未开通收款商户认证',
                    icon: 'none'
                });
                return;
            }

            uni.navigateTo({
                url: '/pagesb/voicebox/voicebox'
            });
        },

        getBoxList() {
            _request
                .postObj('/device/page', {
                    storeId: uni.getStorageSync('storeId'),
                    status: 1
                })
                .then((res) => {
                    if (res.data.data) {
                        this.setData({
                            boxList: res.data.data
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 我的资料
        onMyProfile() {
            if (!uni.getStorageSync('token')) {
                _request.onLogin();

                return;
            }

            uni.navigateTo({
                url: '/pages/myprofile/index'
            });
        },

        // 订单数量
        orderList() {
            let shoporderList = this.shoporderList; // 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
            //订单统计

            _request
                .get(
                    '/mall-order/orderStatistics',
                    {
                        // userId: wx.getStorageSync('userid'),
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        for (let i in shoporderList) {
                            if (shoporderList[i].type == '0') {
                                shoporderList[i].sum = res.data.data.pendingPaymentNum;
                            } else if (shoporderList[i].type == '1') {
                                shoporderList[i].sum = res.data.data.toBeDeliveredNum;
                            } else if (shoporderList[i].type == '2') {
                                shoporderList[i].sum = res.data.data.pendingReceiptNum;
                            } else if (shoporderList[i].type == '3') {
                                shoporderList[i].sum = res.data.data.afterSaleNum;
                            } else if (shoporderList[i].type == '-1') {
                                shoporderList[i].sum = res.data.data.allOrder;
                            }
                        }

                        this.setData({
                            shoporderList: shoporderList
                        });
                    }
                });
        },

        //自提数量
        orderLists() {
            let storemsgList = this.storemsgList; //订单统计

            _request.get('/mall-order/storePickUpOrderStatistics', {}, app.globalData.mallType).then((res) => {
                if (res.data.code == 200) {
                    for (let i in storemsgList) {
                        if (storemsgList[i].type == '2') {
                            //待自提
                            storemsgList[i].sum = res.data.data.toBePickedUpNum;
                        } else if (storemsgList[i].type == '1') {
                            //已自提
                            storemsgList[i].sum = res.data.data.pickedUpNum;
                        }
                    }

                    this.setData({
                        storemsgList: storemsgList
                    });
                }
            });
        },

        // 前往登录
        onLogin() {
            uni.reLaunch({
                // url: '/pages/login/index',
                url: '/firstpages/authorization/index'
            });
        },
        toPath(v) {
            uni.navigateTo({
                url: v
            });
        },
        // 领取创客卡
        getMarkerCard() {
            uni.navigateTo({
                url: '/pages/maker/buymaker/index'
            });
        },

        // 查看详情创客卡
        getMarkerDetails() {
            uni.navigateTo({
                url: '/pages/maker/makerdetails/index?title=' + this.makerDetail.description
            });
        },

        // 前往传创客详情
        onMaker() {
            if (this.makerObj.ismaker) {
                uni.navigateTo({
                    url: '/pages/maker/makerdetails/index?title=' + this.makerDetail.description
                });
            } else {
                uni.navigateTo({
                    url: '/pages/maker/buymaker/index'
                });
            }
        },

        //查看奖金池
        toDetail() {
            uni.navigateTo({
                url: '/pages/maker/bonus/index'
            });
        },

        // 点击展示更多创客内容
        showMarker() {
            this.setData({
                markershow: !this.markershow
            });
        },

        // 点击查看和隐藏金额
        seeMoney() {
            this.setData({
                seeShow: !this.seeShow
            });
        },

        // 前往对应页面
        onOrdertype(e) {
            const type = e.currentTarget.dataset.type;
            uni.navigateTo({
                url: '/pages/mallorder/orderlist?type=' + type
            });
        },

        //前往自提订单页面
        onOrdertype1(e) {
            const type = e.currentTarget.dataset.type;
            uni.navigateTo({
                url: '/pages/mallorder/storeorder/storeorder?type=' + type
            });
        },

        // 复制邀请码
        copywxtap() {
            uni.showToast({
                title: '复制成功'
            });

            let _this = this;

            uni.setClipboardData({
                data: this.codeObj.invitecode,
                success: function (res) {
                    uni.getClipboardData({
                        //这个api是把拿到的数据放到电脑系统中的
                        success: function (res) { }
                    });
                }
            });
        },

        // 我的收藏
        // toFavorite() {
        //     uni.navigateTo({
        //         url: '/pages/myfavorite/index'
        //     });
        // },

        // // 我的优惠卷
        // toMypreferentialcard() {
        //     uni.navigateTo({
        //         url: '/pages/mypreferentialcard/index'
        //     });
        // },

        // // 我的钱包
        toWallet() {
            uni.navigateTo({
                url: '/ec-canvas/wallet/index'
            });
        },

        // // 我的意豆
        // toYidou() {
        //     uni.navigateTo({
        //         url: '/pages/yidou/index'
        //     });
        // },
        myserverToapth(v) {
            uni.navigateTo({
                url: v
            });
        },

        // 我的收益
        toIncome() {
            uni.navigateTo({
                url: '/pages/myincome/index'
            });
        },

        // 签到
        goSigin() {
            uni.navigateTo({
                url: '/pages/sigin/index'
            });
        },

        // 推广红包
        toRedenvelope() {
            uni.navigateTo({
                url: '/pages/redenvelope/index'
            });
        },

        // 卡券兑换
        toCard() {
            uni.navigateTo({
                url: '/pages/cardexchange/index'
            });
        },

        // 关于意约
        toAbout() {
            uni.navigateTo({
                url: '/pages/aboutus/index'
            });
        },

        // 收款码
        toCollectionCode() {
            uni.navigateTo({
                url: '/pages/collectioncode/index'
            });
        },

        // 收货地址
        toSite() {
            uni.navigateTo({
                url: '/shopingmall/addressmanager/addressmanager'
            });
        },

        // 账户安全
        toMyset() {
            uni.navigateTo({
                url: '/pages/myset/index'
            });
        },

        // 消费保障
        toSafeguard() {
            uni.navigateTo({
                url: '/component/safeguard/index'
            });
        },

        // 问题反馈
        toFeedback() {
            uni.navigateTo({
                url: '/component/feedback/index'
            });
        },

        // 推广分享
        toGeneralize() {
            uni.navigateTo({
                url: '/pages/generalize/index'
            });
        },

        //获取奖金池
        getBonusPool() {
            _request
                .get(
                    '/maker/bonusPool',
                    {
                        userId: uni.getStorageSync('userid'),
                        type: 0
                    },
                    getApp().globalData.userType
                )
                .then((res) => {
                    if (res.data.data) {
                        this.setData({
                            bonusPool: res.data.data.bonusPool || 0,
                            peopleNum: res.data.data.legendMakerCount || 0
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        onChange() {
            console.log('占位：函数 onChange 未声明');
        }
    }
};
</script>
<style>
/* pages/my/index.wxss */
page {
    background: #fbfbfb;
    width: 750rpx;
    height: 100%;
    overflow-y: auto;
}

/* 顶部 */
.header {
    width: 100%;
    height: 500rpx;
    position: relative;
}

.mybg {
    height: 500rpx;
    width: 100%;
}

.mymessage {
    z-index: 2;
    position: absolute;
    top: 40rpx;
    left: 40rpx;
    right: 40rpx;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 670rpx;
    height: 160rpx;
}

.personage {
    display: flex;
    flex-wrap: nowrap;
}

.headsshadowbox {
    height: 160rpx;
    width: 160rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headsshadow {
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.3;
    height: 160rpx;
    width: 160rpx;
    position: absolute;
}

.heads {
    height: 138rpx;
    width: 138rpx;
    z-index: 3;
    border-radius: 50%;
}

.mymsg {
    margin-left: 40rpx;
    color: #ffffff;
    padding: 28rpx 0;
    align-items: center;
}

.mymsg view:nth-child(1) {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
}

.mymsg view:nth-child(2) {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 40rpx;
    margin-top: 5rpx;
}

.mymsg view:nth-child(1) text:nth-child(1) {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 50rpx;
}

.mymsg view:nth-child(1) text:nth-child(2) {
    display: block;
    width: 88rpx;
    height: 40rpx;
    background: #ffffff;
    border-radius: 5px;
    color: #ff8722;
    font-size: 24rpx;
    text-align: center;
    line-height: 40rpx;
    margin-left: 10rpx;
}

.mymsg view:nth-child(2) image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 10rpx;
}

.text-hidden {
    width: 300rpx;
    height: 100rpx;
    line-height: 200rpx;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setbox {
    height: 100%;
    text-align: right;
}

.setbox>view {
    width: 112rpx;
    height: 46rpx;
    border-radius: 5px;
    border: 1px solid #ffffff;
    line-height: 46rpx;
    color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 30rpx;
}

.setbox>view image {
    width: 28rpx;
    height: 28rpx;
}

.setbox>view text {
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
}

.setimg {
    width: 40rpx;
    height: 40rpx;
}

/* 我的收藏等 */

.mytabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 28rpx;
    z-index: 2;
    position: absolute;
    top: 190rpx;
}

.text-f {
    width: 100%;
    color: #ffffff !important;
}

.mytabstool {
    width: 25%;
    text-align: center;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

/* 创客 */

.showbottom1 {
    position: relative;
    top: 240rpx;
}

.showbottom2 {
    position: relative;
    top: 20rpx;
}

.marker {
    width: 710rpx;
    height: 106rpx;
    background: #2c303f;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    position: absolute;
    bottom: 12rpx;
    left: 20rpx;
    color: #fff;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
}

.marker1 {
    height: 336rpx;
    width: 710rpx;
    background: #2c303f;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    position: absolute;
    bottom: -218rpx;
    left: 20rpx;
    color: #fff;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
}

.markercard {
    width: 152rpx;
    height: 48rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 13px;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 48rpx;
    text-align: center;
}

.markertext1 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
}

.markertext2 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
}

.markertitle {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
}

.markertoolbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.markertool {
    width: 20%;
    text-align: center;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.markertext {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-top: 14rpx;
    width: 100%;
}

.markerimg {
    width: 80rpx;
    height: 80rpx;
}

/* 收益 */

.earningsbox {
    width: 710rpx;
    height: 260rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 0 20rpx;
    position: relative;
    padding: 40rpx 0;
    box-sizing: border-box;
    display: flex;
}

.h-x {
    width: 1px;
    height: 100rpx;
    background-color: #eeeeee;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.earningsimg {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
}

.payroll {
    width: 50%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: space-between;
    align-items: center;
    height: 100%;
}

.center {
    justify-content: center;
    width: 100%;
}

.earningstext1 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    width: 100%;
    text-align: center;
}

.earningstext2 {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 40rpx;
    width: 100%;
    text-align: center;
}

.earningstext3 {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

/* 订单 */
.oredertabsbox {
    width: 710rpx;
    margin: 20rpx;
}

.orederbox {
    background: #ffffff;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx;
    box-sizing: border-box;
}

.text-f {
    width: 100%;
    color: #ffffff !important;
}

.orederimg {
    width: 80rpx;
    height: 80rpx;
}

.oredertool {
    width: 20%;
    text-align: center;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.oredertool2 {
    width: 50%;
}

.oredertext {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333;
    margin-top: 14rpx;
    width: 100%;
}

/* 轮播 */
.tabbox {
    width: 750rpx;
    overflow-x: auto;
    height: 160rpx;
    /* position: relative;
  top: -50rpx;
  left: 22rpx; */
    display: flex;
    flex-wrap: nowrap;
    padding-left: 20rpx;
    box-sizing: border-box;
}

.tabimg {
    margin-right: 20rpx;
    height: 160rpx;
}

.tabimg>image {
    display: block;
    width: 300rpx;
    height: 160rpx;
}

/* 我的服务*/

.orderbox {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    position: relative;
    left: 22rpx;
    padding: 20rpx 20rpx 30rpx 20rpx;
    box-sizing: border-box;
}

.orderbox2 {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    position: relative;
    left: 22rpx;
    padding: 20rpx 20rpx 200rpx 20rpx;
    box-sizing: border-box;
}

.order {
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    padding-top: 20rpx;
}

.order view:nth-child(1) {
    width: 128rpx;
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.order1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 44rpx;
}

.text {
    width: 128rpx;
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 44rpx;
}

.righticon {
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
}

.ordertoolbox {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    align-items: center;
    width: 100%;
    font-size: 28rpx;
}

.orderimg {
    width: 52rpx;
    height: 52rpx;
}

.ordertool>text {
    width: 100%;
    color: #666666;
    margin-top: 10rpx;
}

.index-title {
    color: #333;
    font-size: 40rpx;
    font-weight: 500;
}

.ordertool {
    width: 25%;
    text-align: center;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.mytool .orderimg {
    width: 48rpx;
    height: 48rpx;
}

.van-tab--active {
    font-size: 30rpx !important;

}

/deep/.van-tabs__line {
    width: 80rpx !important;

}

.login {
    position: absolute;
    font-size: 36rpx;
    color: #ffffff;
    left: 190rpx;
}

.earningsbox2 {
    height: 240rpx;
}

.item-left {
    text-align: left;
    padding-left: 20rpx;
}

.item-right {
    justify-content: flex-end;
    padding-right: 20rpx;
}

.voice_box {
    width: 710rpx;
    height: 140rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx auto;
}

.voice {
    display: flex;
    margin-left: 40rpx;
}

.voice image {
    width: 28rpx;
    height: 38rpx;
}

.voice text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 18rpx;
}

.voice_num {
    display: flex;
    align-items: center;
}

.voice_num text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
    margin-right: 10rpx;
}

.voice_num image {
    width: 20rpx;
    height: 23rpx;
    margin-right: 40rpx;
}
</style>
